<template>
  <div>
      <el-tree
      :data="data"
      node-key="id"
      default-expand-all
      :show-checkbox="isShowCheckbox"
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }"  @click="department(data)">
        <el-input size="mini"  v-if="node.data.isEdit"  v-model="inputValue" @keyup.enter.native="inputConfirm(node,data)" @blur="inputConfirm(node,data)" style="width:40%"/>
        <span  v-else>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="() => appendSubordinate(data)" v-if="isAppendSubordinate">新增下级</el-button>
          <el-button type="text" size="mini" @click="() => appendPeer(node, data)" v-if="isAppendPeer && node.id!==1">新增同级</el-button>
          <el-button type="text" size="mini" @click="() => edit(node,data)" v-if="isEdit && node.id!==1">编辑</el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)" v-if="isMove&& node.id!==1">删除</el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
// let id = 1000
export default {
  name: 'tree',
  data () {
    return {
      inputValue: '',
      list: []
    }
  },
  props: {
    data: Array,
    isAppendSubordinate: Boolean,
    isAppendPeer: Boolean,
    isEdit: Boolean,
    isMove: Boolean,
    isShowCheckbox: Boolean
  },
  // watch: {
  //   'data' (val, oldval) {
  //     this.list = this.$deepcopy(this.data)
  //   }
  // },
  created () {
    // console.log('created==>', this.data)
  },
  methods: {
    department (data) {
      // this.$emit('department', data)
    },
    appendSubordinate (data) {
      this.$emit('appendSubordinate', data)
      // 增加下级
      // const newChild = { id: id++, label: 'testtest', children: [], isEdit: false }
      // if (!data.children) {
      //   this.$set(data, 'children', [])
      // }
      // data.children.push(newChild)
      // this.refreshData()
    },
    // 新增同级
    appendPeer (node, data) {
      // const parent = node.parent
      // const children = parent.data.children || parent.data
      // const newChild = { id: id++, label: 'testtest', children: [], isEdit: false }
      // children.push(newChild)
      // this.refreshData()
    },
    inputConfirm (node, data) {
      // data.label = this.inputValue
      // node.data.isEdit = false
      // this.refreshData()
    },
    // 编辑
    edit (node, data) {
      this.inputValue = data.label
      console.log(111, this.data)
      this.list = this.$deepcopy(this.data)
      this.list.forEach(ele => {
        ele.isEdit = false
        if (ele.hasOwnProperty('children')) {
          this.editLabel(ele.children)
        }
      })
      this.$nextTick(() => {
        node.data.isEdit = true
      })
      console.log(333333, node.data, this.list)
      this.$emit('refreshData', this.list)
    },
    // 递归循环数据
    editLabel (children) {
      children.forEach(item => {
        item.isEdit = false
        if (item.hasOwnProperty('children')) {
          this.editLabel(item.children)
        }
      })
    },
    // 删除
    remove (node, data) {
      this.$confirm('确定删除操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // const parent = node.parent
        // const children = parent.data.children || parent.data
        // const index = children.findIndex(d => d.id === data.id)
        // children.splice(index, 1)
        // this.refreshData()
      }).catch(() => {})
    },
    refreshData () {
      // this.$emit('refreshData', this.list)
    }
  }
}
</script>
<style lang="scss" scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>